<template>
  <div style="padding: 15px 20px 15px 5px">
    <div class="pre-text">{{ text }}</div>
    <vol-form ref="form" :labelWidth="80" :load-key="false" :formFields="fields" :formRules="formOptions">
    </vol-form>



    <div class="form-btns">
      <el-button type="primary" @click="submit" icon="el-icon-check" size="mini">提交</el-button>
      <el-button type="primary" @click="reset" plain icon="el-icon-refresh-right" size="mini">重置</el-button>
    </div>
  </div>
</template>

<script>
function flattenObject(obj, parentKey = '') {
  let flattened = {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      let newKey = parentKey ? `${parentKey}.${key}` : key;
      if (typeof obj[key] === 'object' && obj[key] !== null) {
        // 如果是对象，则递归处理
        Object.assign(flattened, flattenObject(obj[key], newKey));
      } else {
        flattened[newKey] = obj[key];
      }
    }
  }
  return flattened;
}
// 使用方式：
// 1、新建一个vue页面，把此页面内容复制进去
// 2、router->index.js配置路由，页面上输入地址即可看到数据(也可以把菜单配置上)
// 3、或者参照表单设计页面做动态页面
//**表单设计器的table下载还在开发中

import VolForm from '@/components/basic/VolForm'
import axios from 'axios'
export default {
  components: { "vol-form": VolForm, },
  data() {
    return {
      text: "",
      tabsModel: "0",
      fields: { "WarehouseoutId": null, "OrderId": null, "WarehouseoutType": null, "SupplierNumber": null, "SupplierName": null, "SupplierPeople": null, "SupplierPhone": null, "MakeupPeople": null, "MakeupTime": null, "Remark": null },
      formOptions: [[{ "field": "WarehouseoutId", "title": "出库单号", "type": "text", "required": false, "readonly": true, "colSize": null },
      { "field": "OrderId", "title": "关联订单号", "type": "text", "required": false, "readonly": false, "colSize": null },
      { "field": "WarehouseoutType", "title": "出库单类型", "type": "select", "required": true, "readonly": false, "colSize": null, "data": [{ "key": "1", "value": "销售退货出库" }, { "key": "2", "value": "采购收货出库" }, { "key": "3", "value": "生产产品出库" }, { "key": "4", "value": "领用退还出库" }, { "key": "5", "value": "借货出库" }, { "key": "6", "value": "借出出库" }], "dataKey": "出库类型" },
      { "field": "SupplierNumber", "title": "供应商编号", "type": "text", "required": true, "readonly": false, "colSize": null },
      { "field": "SupplierName", "title": "供应商名称", "type": "text", "required": true, "readonly": false, "colSize": null }],
      [{ "field": "SupplierPeople", "title": "供应商联系人", "type": "text", "required": false, "readonly": false, "colSize": null },
      { "field": "SupplierPhone", "title": "供应商方式", "type": "text", "required": true, "readonly": false, "colSize": null },
      { "field": "MakeupPeople", "title": "制单人", "type": "text", "required": false, "readonly": false, "colSize": null },
      { "field": "MakeupTime", "title": "制单时间", "type": "date", "required": false, "readonly": false, "colSize": null }],
      [{ "field": "Remark", "title": "备注", "type": "textarea", "required": false, "readonly": false, "colSize": 12 }]],
      tables: [],
      tabs: []
    };
  },
  created() {

  },
  methods: {
    async submit() {
      //   console.log(this.fields);
      const response = await axios.get('/api/Warehouseoutinfo/GetPageDatas');
      this.tables = response.data;
      console.log(this.tables);

      // 合并数据成一个对象
      const combinedObject = { ...this.tables, ...this.fields };
      this.combinedData = combinedObject;
      console.log("表格加表单", this.combinedData);
      const flattenedCombinedData = flattenObject(this.combinedData);

      const fieldsToSend = {}
      const { rows } = this.tables;
      for (let i = 0; i < rows.length; i++) {
        for (let key in rows[i]) {
          fieldsToSend[key] = rows[i][key];
        }
      }
      for (let key in flattenedCombinedData) {

        fieldsToSend[key] = flattenedCombinedData[key];
      }

      console.log(fieldsToSend);
      await axios.post('/api/WarehouseoutintoDTO/Adds', fieldsToSend)
        .then(response => {
          console.log(response.data)
          if (response.data > 0) {
            this.$Message.success("出库成功");
          }
          else {
            this.$Message.error("出库失败");
          }
        })
        .catch(error => {
          console.error(error);
        });


    },
    reset() {
      this.$refs.form.reset();
      this.$Message.success("表单已重置")
    },
    download() {
      this.$Message.info("111")
    }
  }
};

VolForm;
</script>
<style lang="less" scoped>
.form-btns {
  text-align: center;
}

.tables {
  padding-left: 15px;

  .table-item {
    padding: 10px;
  }

  .table-header {
    display: flex;
    margin-bottom: 8px;
  }

  .header-text {
    position: relative;
    bottom: -9px;
    flex: 1;
    font-weight: bold;
  }

  .header-btns {
    text-align: right;
  }
}
</style>